@use "@/common/styles/colors"

.apps-page
  display: grid
  grid-template-columns: 18rem 1fr
  user-select: none
  height: 100vh

  .app-grid
    display: grid
    grid-template-columns: 1fr 25rem

  .app-list
    height: calc(100vh - 12rem)
    margin: 2.5rem 2rem
    display: flex
    align-content: flex-start
    align-items: flex-start
    gap: 2rem
    flex-wrap: wrap
    overflow-y: scroll

    &.script-list
      gap: 2rem

    .no-apps
      display: flex
      align-items: center
      justify-content: center
      flex-direction: column
      width: 100%
      height: 100%

      svg
        width: 4rem
        height: 4rem
        margin-right: 1rem

      h2
        margin: 0
        text-align: center
        width: 19rem

  .app-details
    display: flex
    justify-content: center
    align-items: center
    height: 100%

  .select-app
    display: flex
    flex-direction: column
    gap: 1rem
    align-items: center

    svg
      width: 8rem
      height: 8rem

    h3
      text-align: center
      margin: 0
      max-width: 8rem


@media screen and (max-width: 1200px)
  .apps-page .app-grid
    display: flex
    flex-direction: column-reverse

  .apps-page .app-list
    margin: 2.5rem 2rem
    overflow-y: auto
    height: auto

  .apps-page .select-app
    display: none

  .apps-page .app-details
    display: flex
    height: 100%

    .app-installer
      width: 100%
      margin: 2.5rem 2rem


  .apps-page
    overflow: scroll
